<style lang="scss">
  @import '@/assets/css/variable';
  .article{
    position: absolute;
    top: 0;
    bottom: $tabbar-height;
    width: 100%;
    background-color: $main-bgc;
    min-height: 100%;
    font-size: 1.2rem;
    overflow: auto;
    box-sizing: border-box;
    .title{
      font-size: 1.8rem;
      color: $color-title;
      text-align: center;
      font-weight: bold;
    }
}
</style>
<template>
  <div class="article padding-all-l">
    <h1 class="title">{{article.title}}</h1>
    <div class="content margT-l" v-html="article.content"></div>
  </div>
</template>
<script>
import {Toast} from 'vant';
export default {
  name: 'Article',
  components: {
    
  },
  data() {
    return {
      article: {
        title: "加载中...",
        content: ""
      }
    }
  },
  mounted () {
    this.getArticle();
  },
  methods: {
    getArticle() {
      let params = {
        id: Number(this.$route.params.id)
      }
      const toast = Toast.loading({
        forbidClick: true,
        message: '加载中...',
      });
      this.$request.getArticle(params).then(res=>{
        console.log("res", res)
        this.article = res.data;
        toast.clear();
      })
    }
  }
}
</script>
